==========================================================
   HandbalNL TV — Platform CSS
   Kleurenschema : Paars / Navy
   Template       : 2 (Dubbele Navigatiebalk)
   Bijgewerkt     : 2026-07-28
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ── BODY ─────────────────────────────────────────────────── */
body {
    background-color: #011145 !important;
    font-family: 'Space Grotesk', Arial, sans-serif !important;
    color: #F0E7FD !important;
}
/* ── NAVBAR — Template 2: Dubbele balk ───────────────────── */
/*   Bovenste zone (44px) : utility bar — nav-links + auth
     Onderste zone (64px) : main bar — logo
     Totaal               : 108px                             */
.navbar-header .navbar,
header .navbar,
nav.navbar {
    background: linear-gradient(
        to bottom,
        #B87CFF 0px,  #B87CFF 44px,
        #011145 44px, #011145 100%
    ) !important;
    border-bottom: none !important;   /* lijn loopt via ::after */
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    padding: 0 16px !important;
    align-items: flex-start !important;
    overflow: visible !important;     /* zodat ::after zichtbaar is */
}
/* Logo: links in de hoofdbalk (y=44–108), verticaal gecentreerd */
nav.navbar .navbar-brand {
    position: absolute !important;
    left: 18px !important;
    top: 44px !important;        /* begin van de hoofdbalk         */
    bottom: 2px !important;      /* 2px ruimte voor de border-lijn */
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 20 !important;      /* boven collapse én JUMP-overlays */
    background: transparent !important;
}
/* Border-lijn via ::after zodat hij altijd doordraait,
   ook over de absolute-gepositioneerde logo heen            */
nav.navbar::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background-color: #B87CFF !important;
    z-index: 30 !important;
}
/* Logo afbeelding iets groter */
nav.navbar .navbar-brand img {
    max-height: 36px !important;
    width: auto !important;
    max-width: none !important;
}
/* UTILITY BAR (top 44px) — alleen auth-knoppen (ms-auto nav) */
nav.navbar .navbar-nav.ms-auto {
    height: 44px !important;
    align-items: center !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 5 !important;
}
/* Auth-tekst: donker navy op de paarse balk */
nav.navbar .navbar-nav.ms-auto .nav-link,
nav.navbar .navbar-nav.ms-auto a {
    color: #000B2E !important;
    font-weight: 700 !important;
}
nav.navbar .navbar-nav.ms-auto .nav-link:hover,
nav.navbar .navbar-nav.ms-auto a:hover {
    color: #011145 !important;
    opacity: 0.75 !important;
}
/* HOOFDBALK (bottom 64px) — HOME-nav naast het logo            */
/* Logo rechterrand = 18px + 143px = 161px → + 24px gap = 185px */
nav.navbar .navbar-nav.mb-2,
nav.navbar .navbar-nav.mb-lg-0 {
    margin-top: 44px !important;
    height: 64px !important;
    align-items: center !important;
    padding-left: 185px !important;
    position: relative !important;
    z-index: 5 !important;
}
/* Collapse container: transparante achtergrond zodat logo
   er nooit visueel onder verdwijnt                              */
nav.navbar .navbar-collapse {
    display: flex !important;
    align-items: flex-start !important;
    height: 108px !important;
    background-color: transparent !important;
}
/* Container binnen de navbar: volledig breed maken zodat
   logo (absoluut) en nav-items (in flow) dezelfde linkermarge
   hebben. mb-5 op de nav zelf nullen. */
nav.navbar .container,
.navbar-header .navbar .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
nav.navbar.mb-5,
.navbar.mb-5 {
    margin-bottom: 0 !important;
}
/* Ruimte na navbar ophalen zodat content niet verspringt */
.navbar-header + *,
header + main,
header + section {
    padding-top: 0 !important;
}
/* ── NAVIGATIELINKS ──────────────────────────────────────── */
.navbar-nav .nav-link,
.navbar-nav .nav-item a {
    color: #F0E7FD !important;
    font-weight: 600 !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item a:hover {
    color: #B87CFF !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active a {
    color: #B87CFF !important;
}
/* Auth-knoppen in navbar (Inloggen / Registreren) */
.navbar .btn-outline-light,
.navbar .btn-light {
    border-color: rgba(255,255,255,0.4) !important;
    color: #F0E7FD !important;
    background-color: transparent !important;
}
.navbar .btn-outline-light:hover,
.navbar .btn-light:hover {
    background-color: #B87CFF !important;
    border-color: #B87CFF !important;
    color: #011145 !important;
}
/* Hamburger icon (mobiel) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23B87CFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler {
    border-color: rgba(184,124,255,0.4) !important;
}
/* ── KNOPPEN ─────────────────────────────────────────────── */
/* Alle gekleurde knoppen → paars
   .btn-success dekt de hero "KIJK NU"-knop (JUMP gebruikt
   doorgaans .btn-success voor de featured CTA)               */
.btn-primary,
.btn-success,
.btn-warning,
.btn-info,
a.btn-primary,
a.btn-success,
a.btn-warning,
a.btn-info {
    background-color: #B87CFF !important;
    border-color: #B87CFF !important;
    color: #011145 !important;
    font-weight: 700 !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover,
a.btn-primary:hover,
a.btn-success:hover,
a.btn-warning:hover,
a.btn-info:hover {
    background-color: #9B5CE0 !important;
    border-color: #9B5CE0 !important;
    color: #011145 !important;
}
/* ── KOPPEN ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: #B87CFF !important;
}
/* Decoratieve paarse lijn boven h2-secties */
h2::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 3px !important;
    background: #B87CFF !important;
    margin-bottom: 10px !important;
}
/* ── KAARTEN ─────────────────────────────────────────────── */
.card {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
/* JUMP gebruikt .asset-title (met Bootstrap .text-muted) voor
   kaarttitels — dat geeft zwart op donker; overschrijven:      */
a.asset-title,
.asset-title {
    color: #B87CFF !important;
}
a.asset-title:hover,
.asset-title:hover {
    color: #9B5CE0 !important;
}
/* card-header tekst algemeen */
.card-header,
.card-header p,
.card-header .asset-description {
    color: #F0E7FD !important;
    background-color: transparent !important;
}
/* card-body en footer */
.card-body,
.card-footer {
    color: #F0E7FD !important;
}
.card:hover {
    opacity: 0.9 !important;
}
/* ── SLIDER PIJLTJES (.slider-btn) ──────────────────────── */
/* JUMP gebruikt .slider-btn / .slider-btn-next / .slider-btn-prev */
.slider-btn,
.slider-btn-next,
.slider-btn-prev {
    background-color: #011145 !important;
    border: 1px solid rgba(184,124,255,0.5) !important;
    color: #B87CFF !important;
}
.slider-btn:hover,
.slider-btn-next:hover,
.slider-btn-prev:hover {
    background-color: #B87CFF !important;
    border-color: #B87CFF !important;
    color: #011145 !important;
}
/* ── MODALS / OVERLAYS ───────────────────────────────────── */
.modal-content {
    background-color: #000B2E !important;
    color: #F0E7FD !important;
    border: 1px solid rgba(184,124,255,0.3) !important;
}
.modal-header {
    border-bottom-color: rgba(184,124,255,0.3) !important;
}
.modal-footer {
    border-top-color: rgba(184,124,255,0.3) !important;
}
.modal-title {
    color: #B87CFF !important;
}
.modal-backdrop {
    background-color: #000B2E !important;
}
/* ── FORMULIEREN ─────────────────────────────────────────── */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"] {
    background-color: #011145 !important;
    border-color: rgba(184,124,255,0.4) !important;
    color: #F0E7FD !important;
}
.form-control:focus,
.form-select:focus {
    border-color: #B87CFF !important;
    box-shadow: 0 0 0 0.2rem rgba(184,124,255,0.25) !important;
    background-color: #011145 !important;
    color: #F0E7FD !important;
}
.form-label,
label {
    color: #F0E7FD !important;
}
/* ── DROPDOWN ────────────────────────────────────────────── */
.dropdown-menu {
    background-color: #000B2E !important;
    border: 1px solid rgba(184,124,255,0.3) !important;
}
.dropdown-item {
    color: #F0E7FD !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #B87CFF !important;
    color: #011145 !important;
}
/* User-account dropdown in navbar */
#navbarDarkDropdownMenuLink {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #F0E7FD !important;
}
#navbarDarkDropdownMenuLink + .dropdown-menu {
    background-color: #000B2E !important;
    border: 1px solid rgba(184,124,255,0.2) !important;
}
#navbarDarkDropdownMenuLink + .dropdown-menu .dropdown-item:hover {
    background-color: #B87CFF !important;
    color: #011145 !important;
}
/* ── LINKS ───────────────────────────────────────────────── */
a {
    color: #B87CFF !important;
}
a:hover {
    color: #9B5CE0 !important;
}
/* ── BADGES / LABELS ─────────────────────────────────────── */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-info {
    background-color: #B87CFF !important;
    color: #011145 !important;
}
/* ── PAGINERING ──────────────────────────────────────────── */
.page-link {
    background-color: #000B2E !important;
    border-color: rgba(184,124,255,0.3) !important;
    color: #B87CFF !important;
}
.page-item.active .page-link {
    background-color: #B87CFF !important;
    border-color: #B87CFF !important;
    color: #011145 !important;
}
/* ── FOOTER ──────────────────────────────────────────────── */
footer,
.footer-section,
.footer {
    background-color: #F0E7FD !important;
    color: #011145 !important;
}
footer a {
    color: #6D28D9 !important;
}
footer a:hover {
    color: #4C1D95 !important;
}
/* Kaarten binnen de footer overschrijven anders de algemene
   (donkere) .card-body/.card-header tekstkleur — hier lichte
   achtergrond dus donkere tekst nodig voor leesbaarheid.
   Ook Bootstrap's .text-muted en overige tekst-elementen
   pakken anders alsnog een te lichte/grijze kleur. */
footer .card,
footer .card-body,
footer .card-header,
footer .card-footer,
footer .card-header p,
footer .card-header .asset-description {
    background-color: transparent !important;
    color: #011145 !important;
}
footer,
footer p,
footer span,
footer div,
footer li,
footer small,
footer .text-muted {
    color: #011145 !important;
}
footer a,
footer a.asset-title,
footer .asset-title {
    color: #6D28D9 !important;
}
footer a:hover,
footer a.asset-title:hover,
footer .asset-title:hover {
    color: #4C1D95 !important;
}
/* Footer: logo centreren + "powered by JUMP"-tekst verbergen */
footer .card-body .row.mb-5 {
    justify-content: center !important;
}
footer .card-body .row.mb-5 .col-12.col-md-4 {
    display: flex !important;
    justify-content: center !important;
}
footer .card-body .row.mb-5 .col-12.col-md-4 > .row {
    justify-content: center !important;
    width: auto !important;
}
footer .card-body .row.mb-5 .col-12.col-md-4 > .row > .col-8 {
    display: none !important;
}
footer .card-body .row.mb-5 .col-12.col-md-4 > .row > .col-4 {
    flex: 0 0 auto !important;
    width: auto !important;
    text-align: center !important;
}
/* ==========================================================
   MOBIEL — reset Template 2 positionering onder lg-breakpoint
   Bootstrap lg = 992px. Standaard single-bar navbar op mobiel.
   ========================================================== */
@media (max-width: 991.98px) {
    /* Navbar: hoogte auto, geen vaste 108px */
    nav.navbar,
    .navbar-header .navbar {
        height: auto !important;
        min-height: 56px !important;
        max-height: none !important;
        background: #000B2E !important;
        align-items: center !important;
        padding: 0 15px !important;
    }
    /* Logo: terug in normale flow (geen absolute positie) */
    nav.navbar .navbar-brand {
        position: static !important;
        height: auto !important;
        top: auto !important;
        bottom: auto !important;
        display: flex !important;
        align-items: center !important;
        z-index: auto !important;
        margin: 8px 0 !important;
    }
    nav.navbar .navbar-brand img {
        max-height: 28px !important;
    }
    /* Container: normale padding */
    nav.navbar .container {
        padding: 0 !important;
        flex-wrap: wrap !important;
    }
    /* Collapse: Bootstrap mag weer display: none gebruiken om
       het menu te verbergen. Alleen tonen als .show actief is. */
    nav.navbar .navbar-collapse:not(.show) {
        display: none !important;
    }
    nav.navbar .navbar-collapse.show {
        display: block !important;
        height: auto !important;
        background: #000B2E !important;
        padding: 8px 0 !important;
    }
    /* Nav items: reset Template 2 verschuivingen */
    nav.navbar .navbar-nav.mb-2,
    nav.navbar .navbar-nav.mb-lg-0 {
        margin-top: 0 !important;
        height: auto !important;
        padding-left: 0 !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    nav.navbar .navbar-nav.ms-auto {
        height: auto !important;
        margin-top: 0 !important;
        padding: 0 !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    /* Alle nav links in uitgevouwen menu: links uitlijnen */
    nav.navbar .navbar-nav .nav-link,
    nav.navbar .navbar-nav .nav-item a,
    nav.navbar .navbar-nav a {
        display: block !important;
        text-align: left !important;
        padding: 10px 16px !important;
        width: 100% !important;
    }
    /* Lijstitems ook volle breedte */
    nav.navbar .navbar-nav .nav-item {
        width: 100% !important;
    }
}
/* ==========================================================
   HERO — Supercup Recap intro visual
   (buiten de mobiele media query, geldt op alle breedtes)
   ========================================================== */
.intro-visual-bg {
  position: relative;
  background-color: #1a0f3d;
  overflow: hidden;
}
.intro-visual-bg::before {
  content: "";
  position: absolute;
  left: -30%;
  bottom: 0;
  width: 145%;
  height: 120%;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGFhZ18yIiBkYXRhLW5hbWU9IkxhYWcgMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAyLjkxIDc4LjEiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNBODU1Rjc7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTEuMzEsMTIuNTNjLTUuNTgtLjU1LTkuNS0zLjE4LTExLjc1LTkuMzQuNTEtMS4wNiwxLTIuMTMsMS40OC0zLjE5LDEuOTYsNi4wMyw1LjU5LDguNzksMTAuODgsOS41OS0uMTkuOTctLjM5LDEuOTQtLjYxLDIuOTMiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTY3LjQzLDE1LjM1Yy02LjYyLS40Mi0xMi4yMi41MS0xNi44LjE4LjI0LTEuMDEuNDctMi4wMS42OC0zLDQuMzYuNTIsOS43My0uMTIsMTYuMTIuNjIuMDEuNzIuMDEsMS40NiwwLDIuMiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODQuMjUsMjEuODljLTYuMTktMy4zLTExLjgyLTQuMTctMTYuOS00LjI3LjA0LS43Ny4wNi0xLjUzLjA3LTIuMjcsNC45MS4zNSwxMC4zNywxLjQ4LDE2LjM5LDUuMDUuMTYuNDkuMy45OS40MywxLjUiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTk5LjY5LDM1LjEzYy01LjM0LTUuODMtMTAuMzctOS40My0xNS4wOS0xMS42OS0uMTEtLjUyLS4yMy0xLjA0LS4zNi0xLjU1LDQuNiwyLjQ2LDkuNSw2LjI4LDE0LjcxLDEyLjMxLjI2LjMxLjUuNjEuNzMuOTIiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQ5LjA0LDIxLjcxYy02LjQ2LjE2LTExLjI1LTIuMjYtMTQuMzgtOS4wMy41OC0xLjA0LDEuMTUtMi4wOSwxLjcxLTMuMTUsMi44NCw2LjUyLDcuMzQsOC45OCwxMy41MSw5LjA1LS4yNywxLjAzLS41NCwyLjA3LS44MywzLjEzIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02Ni45OCwyMi4zOGMtNy4zLjU3LTEzLjU4LDIuMzMtMTguODUsMi41Mi4zMi0xLjA3LjYyLTIuMTQuOTEtMy4xOSw1LjA0LS4wMywxMS4xLTEuNTIsMTguMTctMS43NS0uMDYuNzktLjE0LDEuNi0uMjIsMi40MiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODUuMSwyNi42OGMtNi43LTIuNDMtMTIuODQtMi40NS0xOC40Mi0xLjgxLjExLS44NC4yMS0xLjY4LjMtMi40OSw1LjQxLS4zOSwxMS4zOC0uMDgsMTcuOTEsMi42NS4wOC41NC4xNSwxLjA5LjIxLDEuNjUiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEwMS40NSwzOGMtNS43MS01LjEzLTExLjEyLTguMDMtMTYuMjItOS42MS0uMDMtLjU4LS4wOC0xLjE1LS4xMy0xLjcxLDQuOTcsMS44MSwxMC4yNSw0Ljk2LDE1Ljg0LDEwLjMzLjE4LjMyLjM1LjY1LjUxLjk4Ii8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00Ni4wOSwzMS40NmMtNy4zMy43Mi0xMy0xLjc1LTE3LjAxLTkuNTIuNjYtMS4wMSwxLjMtMi4wMiwxLjkzLTMuMDQsMy43Miw3LjM4LDkuMDksOS44LDE2LjEzLDkuMjYtLjM0LDEuMDktLjY5LDIuMTktMS4wNiwzLjMxIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02NS44NiwzMC4xYy03Ljk4LDEuNTktMTQuOTUsNC4xNC0yMC45MSw0LjcyLjM5LTEuMTMuNzctMi4yNSwxLjEzLTMuMzYsNS43My0uNDYsMTIuNDctMi43NiwyMC4yMi00LjAxLS4xNC44Ny0uMjksMS43NS0uNDUsMi42NSIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODUuMjcsMzJjLTcuMi0xLjQ1LTEzLjg1LS41Ny0xOS45NC44Mi4xOS0uOTIuMzYtMS44My41My0yLjczLDUuOTItMS4xNSwxMi40LTEuNzIsMTkuNDMuMDcsMCwuNiwwLDEuMjEtLjAyLDEuODQiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEwMi41Miw0MS4xN2MtNi4wOS00LjMyLTExLjg3LTYuNDMtMTcuMzQtNy4yNi4wNC0uNjUuMDctMS4yOC4wOS0xLjkxLDUuMzUsMS4wOSwxMSwzLjQ3LDE2Ljk3LDguMDcuMTEuMzYuMi43My4yOCwxLjEiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQyLjQ2LDQxLjY5Yy04LjIxLDEuMDktMTQuNzUtMS43NC0xOS42My0xMC45NS43My0uOTUsMS40NS0xLjksMi4xNi0yLjg3LDQuNTksOC42NywxMC44NCwxMS4zNSwxOC43NiwxMC4zNi0uNDIsMS4xNS0uODQsMi4zLTEuMjgsMy40NiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjQuMDYsMzguNTJjLTguNjcsMi42LTE2LjMyLDUuODYtMjIuOTYsNi42Ny40Ny0xLjE4LjkyLTIuMzQsMS4zNi0zLjUxLDYuNDEtLjc1LDEzLjgzLTMuNzksMjIuMjctNi4wNi0uMjEuOTUtLjQ0LDEuOTEtLjY4LDIuODkiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTg0Ljc2LDM3Ljk1Yy03LjcxLS40MS0xNC44NiwxLjQtMjEuNDYsMy41NC4yNi0xLC41MS0xLjk5Ljc1LTIuOTcsNi40My0xLjksMTMuNDEtMy4zOSwyMC45NS0yLjYzLS4wNy42Ny0uMTUsMS4zNi0uMjQsMi4wNiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAyLjkxLDQ0LjhjLTYuNDctMy40MS0xMi42Mi00LjY2LTE4LjQ3LTQuNzEuMTItLjczLjIzLTEuNDQuMzItMi4xNCw1LjczLjMxLDExLjc2LDEuODYsMTguMSw1LjU4LjAzLjQxLjA1Ljg0LjA2LDEuMjciLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM4LjE1LDUyLjMzYy05LjA4LDEuMjItMTYuNS0yLjMzLTIyLjI2LTEzLjQ2LjgxLS44NiwxLjYtMS43MywyLjM5LTIuNjIsNS40NywxMC40MywxMi41OSwxMy43LDIxLjM4LDEyLjQ5LS40OSwxLjE5LS45OSwyLjM5LTEuNTEsMy41OSIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjEuNTgsNDcuNjdjLTkuMzUsMy41OC0xNy42OSw3LjQyLTI1LjAxLDguMjcuNTQtMS4yMSwxLjA3LTIuNDIsMS41OS0zLjYyLDcuMDktLjg2LDE1LjItNC41MywyNC4zMi03Ljc5LS4yOSwxLjAzLS41OSwyLjA3LS45LDMuMTMiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTgzLjU4LDQ0LjYyYy04LjIyLjY4LTE1Ljg4LDMuNDItMjIuOTgsNi4yNi4zNC0xLjA4LjY2LTIuMTUuOTgtMy4yMSw2LjkzLTIuNjIsMTQuNDItNS4wNSwyMi40Ny01LjM2LS4xNC43Ni0uMywxLjUyLS40NywyLjMxIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDIuNjMsNDkuMDNjLTYuODQtMi40NC0xMy4zOC0yLjc4LTE5LjYtMi4wMS4xOS0uODEuMzgtMS42MS41NS0yLjQsNi4xLS41LDEyLjUxLjE1LDE5LjIzLDIuOTItLjA0LjQ4LS4xLjk4LS4xNywxLjQ4Ii8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMy4xNyw2My4yN2MtOS45NiwxLjA4LTE4LjI1LTMuNTktMjQuODgtMTcuMTguODgtLjc0LDEuNzUtMS41MSwyLjYxLTIuMjksNi4zNCwxMi43MSwxNC4zNCwxNi45NiwyNC4wMSwxNS44LS41NywxLjIyLTEuMTQsMi40NS0xLjc0LDMuNjciLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU4LjQyLDU3LjU1Yy0xMC4wMyw0LjQ3LTE5LjA1LDguNzUtMjcuMDYsOS40MS42Mi0xLjIzLDEuMjItMi40NiwxLjgxLTMuNjksNy43OC0uNzUsMTYuNTctNC45MSwyNi4zOC05LjA5LS4zNiwxLjExLS43NCwyLjIzLTEuMTMsMy4zNyIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODEuNzEsNTIuMDljLTguNzIsMS43OS0xNi44OSw1LjQzLTI0LjUsOC45MS40MS0xLjE2LjgxLTIuMzEsMS4yLTMuNDUsNy40NC0zLjI4LDE1LjQ0LTYuNjMsMjMuOTktOC4wNC0uMjIuODQtLjQ1LDEuNy0uNywyLjU4Ii8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDEuNjcsNTMuOThjLTcuMjItMS40MS0xNC4xMy0uODEtMjAuNzMuNzguMjctLjkxLjUzLTEuOC43Ny0yLjY3LDYuNDgtMS4zMiwxMy4yNi0xLjYsMjAuMzYuMTYtLjEyLjU2LS4yNSwxLjE0LS4zOSwxLjc0Ii8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNy41MSw3NC4zOGMtMTAuODMuNjItMjAtNS42NC0yNy41MS0yMi4yNS45Ni0uNiwxLjktMS4yMiwyLjg0LTEuODcsNy4yMiwxNS41NCwxNi4wOSwyMS4yMSwyNi42MywyMC40LS42NCwxLjI0LTEuMywyLjQ4LTEuOTYsMy43MSIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTQuNTgsNjguMTJjLTEwLjcyLDUuMjUtMjAuNDIsOS43OC0yOS4xMSw5Ljk4LjY5LTEuMjQsMS4zNy0yLjQ4LDIuMDQtMy43Miw4LjQ2LS4zOCwxNy45NC00Ljg1LDI4LjQzLTkuODYtLjQ0LDEuMTktLjg5LDIuMzktMS4zNSwzLjYiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTc5LjE3LDYwLjM4Yy05LjIzLDIuODgtMTcuOTEsNy4zOC0yNi4wMiwxMS40MS40OS0xLjI0Ljk3LTIuNDYsMS40My0zLjY3LDcuOTUtMy44NiwxNi40NS04LjA4LDI1LjUyLTEwLjYtLjI5Ljk0LS42LDEuODktLjkyLDIuODYiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEwMC4wNCw1OS43NGMtNy42LS4zNC0xNC44OCwxLjItMjEuODYsMy42LjM1LTEsLjY4LTEuOTksMS0yLjk2LDYuODUtMi4xMywxNC4wMi0zLjM2LDIxLjQ5LTIuNjYtLjE5LjY2LS40LDEuMzMtLjYyLDIuMDIiLz4KICA8L2c+Cjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  /* left/bottom/width/height staan vast en worden nooit geanimeerd —
     dat voorkomt layout-herberekeningen (de oorzaak van de lag).
     De "wipe" gebruikt clip-path (rechterkant dichtgeknipt, die
     geleidelijk opent naar links → rechts) — simpel, geen rare
     positie-berekeningen zoals de eerdere mask-versie, en soepel
     omdat clip-path + transform beide door de GPU gecomposit worden.
     transform-origin 0% 100% = linksonder van dít element, exact
     de hoek die door left/bottom al vastligt, dus de groei-animatie
     verandert nooit de positie. */
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transform-origin: 0% 100%;
  will-change: clip-path, transform, filter;
}
/* De hero is nu een Glide-carousel (.glide__slide wrapt .intro-visual-bg).
   De animatie zit ALLEEN op de actieve slide-selector, niet op de
   kale .intro-visual-bg::before hierboven — daardoor telt elke keer
   dat Glide de --active klasse aan een nieuwe <li> hangt als een
   "verse" toepassing van de animatie, en herstart hij vanzelf per
   slidewissel. Bij het verlaten van een slide valt hij terug op de
   statische (verborgen) staat hierboven, klaar om opnieuw te spelen. */
.glide__slide--active .intro-visual-bg::before {
  animation:
    heroPatternWipe 1.5s ease-out forwards,
    heroPatternColorFlash 0.75s ease-out forwards,
    heroPatternGrow 1.2s ease-in-out forwards;
}
@keyframes heroPatternWipe {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0% 0 0);
    clip-path: inset(0 0% 0 0);
  }
}
/* brightness(6) laat alle kanalen clippen naar puur wit. Blijft nu
   precies 0.5s wit (66% van de 0.75s) voordat hij naar de echte
   kleur springt. De laatste stap gebruikt steps() in plaats van een
   continue interpolatie: filter dwingt sowieso een repaint af (in
   tegenstelling tot transform/clip-path), en met steps() hoeft de
   browser dat maar een handvol keer te berekenen in plaats van elk
   frame — dat verhelpt het resterende gehaper. */
@keyframes heroPatternColorFlash {
  0%, 66% {
    filter: brightness(6);
  }
  100% {
    filter: brightness(1);
    animation-timing-function: steps(4, jump-end);
  }
}
@keyframes heroPatternGrow {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
/* Scroll-parallax — alleen in browsers die scroll-linked
   animations ondersteunen (Chrome/Edge; nog niet overal). Oudere
   browsers negeren dit blok gewoon en tonen het patroon statisch,
   zonder dat er iets breekt. Stuurt alleen de verticale
   background-position aan (niet transform, dat zit al vast aan
   de groei-animatie), dus geen conflict met de andere animaties. */
@supports (animation-timeline: view()) {
  .glide__slide--active .intro-visual-bg::before {
    animation:
      heroPatternWipe 1.5s ease-out forwards,
      heroPatternColorFlash 0.75s ease-out forwards,
      heroPatternGrow 1.2s ease-in-out forwards,
      heroPatternParallax linear both;
    animation-timeline: auto, auto, auto, view();
    /* "entry" werkte niet omdat de hero al bovenaan de pagina
       staat bij het laden — die fase (van onderaf het scherm in
       scrollen) is dan al voorbij vóórdat er iets gescrold wordt.
       "cover" loopt vanaf het moment dat de hero zichtbaar is
       (dus meteen bij scroll 0) tot hij volledig van het scherm
       is gescrold — dat is de fase die we willen. */
    animation-range: cover 0% cover 100%;
  }
  @keyframes heroPatternParallax {
    from { background-position-y: 100%; }
    to   { background-position-y: 60%; }
  }
}
.intro-visual-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,6,48,0) 30%, rgba(13,6,48,0.9) 100%);
  pointer-events: none;
  z-index: 0;
}
.intro-visual-bg h1,
.intro-visual-bg > * {
  position: relative;
  z-index: 1;
}
.intro-visual-bg h1 {
  color: #fff !important;
  text-transform: uppercase;
  font-size: 2.75rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(24px);
}
/* De description (bv. "Wie won er?") is de <p class="lead..."> tussen
   titel en knop — animeerde nog niet mee. */
.intro-visual-bg p {
  opacity: 0;
  transform: translateY(24px);
}
.intro-visual-bg .btn,
.intro-visual-bg a.btn {
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(24px);
}
/* Zelfde principe als hierboven: animatie alleen op de actieve-slide
   variant, zodat titel, description en knop opnieuw faden/schuiven
   bij elke slidewissel in plaats van maar één keer bij de eerste
   load. Duidelijke stagger: titel → description → knop, elk 0.2s
   na elkaar. */
.glide__slide--active .intro-visual-bg h1 {
  animation: heroTextIn 0.5s ease-out 0.5s forwards;
}
.glide__slide--active .intro-visual-bg p {
  animation: heroTextIn 0.5s ease-out 0.7s forwards;
}
.glide__slide--active .intro-visual-bg .btn,
.glide__slide--active .intro-visual-bg a.btn {
  animation: heroTextIn 0.5s ease-out 0.9s forwards;
}
@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Mobiele positie van het SVG-patroon in de hero — alleen deze
   .intro-visual-bg::before regel, dus raakt niets buiten de hero-
   carousel (de carousels verderop op de homepage gebruiken deze
   klasse niet en blijven onaangeroerd). */
@media (max-width: 767.98px) {
  .intro-visual-bg::before {
    left: -55%;
    bottom: -20%;
  }
  /* Op mobiel mag het patroon na de intro-animatie weer wegfaden.
     Volledige animation-lijst opnieuw hier (kan niet los aangevuld
     worden), met heroPatternFadeOut als laatste stap: start pas
     nadat wipe/grow/flash klaar zijn (rond 1.5s), fadet dan in 1s
     naar opacity 0 en blijft zo (forwards). */
  .glide__slide--active .intro-visual-bg::before {
    animation:
      heroPatternWipe 1.5s ease-out forwards,
      heroPatternColorFlash 0.75s ease-out forwards,
      heroPatternGrow 1.2s ease-in-out forwards,
      heroPatternFadeOut 1s ease-in 2.5s forwards;
  }
}
@keyframes heroPatternFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}